/**
  * @description: 收货人信息填写
*/
<template>
  <div class="pages" v-if="this.show">
    <div class="main-div">
      <div class="title titleFlex">
        <span v-if="addressState == 1">收货人信息</span>
        <span v-if="addressState == 2">取货人信息</span>
        <!-- <span><img src="@/assets/shdzbj.png" alt="" width="18" /></span> -->
      </div>
      <div>
        <van-form @submit="onSubmit" ref="form">
          <van-field
            v-if="this.addressState == 1"
            v-model="username"
            label="收货人："
            label-class="label-sty"
            placeholder="请输入收货人"
            :rules="[{ required: true }]"
          />
          <van-field
            v-if="this.addressState == 2"
            v-model="username"
            label="取货人："
            label-class="label-sty"
            placeholder="请输入取货人"
            :rules="[{ required: true }]"
          />
          <van-field
            v-model="phone"
            label="联系电话："
            label-class="label-sty"
            placeholder="请输入联系电话"
            :rules="[
              { required: true },
              { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' },
            ]"
          />
          <!-- 处理快递到付和用户自取单选按钮选择时判断 -->
          <template v-if="addressState == '2'">
            <van-cell
              title="取货地址："
              is-link
              :value="addressName"
              :url="
                '#/selectAddress?goodsId=' +
                this.orderInfoObject.goodsId +
                '&username=' +
                this.username +
                '&phone=' +
                this.phone +
                '&addressState=' +
                this.addressState +
                '&num=' +
                this.num +
                '&shipType=' +
                this.$route.query.goodstypeCode
              "
            />
          </template>

          <!-- 处理单个用户自取方式判断 -->
          <template
            v-else-if="
              this.orderInfoObject.shipTypeArr.indexOf('1') == '-1' &&
              this.orderInfoObject.shipTypeArr.indexOf('2') != '-1'
            "
          >
            <van-cell
              title="取货地址："
              is-link
              :value="addressName"
              :url="
                '#/selectAddress?goodsId=' +
                this.orderInfoObject.goodsId +
                '&username=' +
                this.username +
                '&phone=' +
                this.phone +
                '&addressState=' +
                this.addressState +
                '&num=' +
                this.num +
                '&shipType=' +
                this.$route.query.goodstypeCode
              "
            />
          </template>

          <template v-else>
            <van-field
              v-model="address"
              label="收货地址："
              label-class="label-sty"
              placeholder="请输入收货地址"
              :rules="[{ required: true }]"
            />
          </template>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "@/utils/bus";
export default {
  name: "consigneeInformationEdit",
  props: {
    orderInfoObject: Object,
    show: Boolean,
    shipTypeB: String,
  },
  data() {
    return {
      username: "",
      phone: "",
      address: "",
      addressState: "",
      addressName: "",
      shopAddressId: "",
      num: 1,
      goodstypeCode: this.$route.query.goodstypeCode,
    };
  },
  created() {},
  mounted() {
    Bus.$on("sendBybus", (data) => {
      this.addressState = data;
    });

    Bus.$on("stepperBybus", (data) => {
      this.num = data;
    });
  },
  watch: {
    shipTypeB: {
      handler(value) {
        this.addressState = value;
      },
      immediate: true,
    },
    "orderInfoObject.receiverName": {
      handler(value) {
        this.username = value;
        if (this.$route.query.username) {
          this.username = this.$route.query.username;
        }
      },
    },
    "orderInfoObject.receiverPhone": {
      handler(value) {
        this.phone = value;
        if (this.$route.query.phone) {
          this.phone = this.$route.query.phone;
        }
      },
    },
    "orderInfoObject.receiverAddress": {
      handler(value) {
        this.address = value;
        if (this.$route.query.addressName) {
          this.addressName = this.$route.query.addressName;
        }
      },
    },
  },
  methods: {
    onSubmit() {
      if (this.goodstypeCode == 2) {
        this.$refs.form
          .validate()
          .then(() => {
            let formData = {
              shipType: this.addressState,
              receiver: this.username,
              phone: this.phone,
              num: this.num,
              address: this.address,
              shopAddressId: this.$route.query.addressId,
              goodsId: this.orderInfoObject.goodsId,
              appFrom: 1024,
            };
            this.$http
              .post("/api/shop/order/createOrder", formData)
              .then((res) => {
                if (res.code == 0) {
                  this.$emit("success", true);
                }
              });
          })
          .catch(() => {
            this.$toast.fail("提交失败");
            return false;
          });
      } else {
        let formData = {
          shipType: this.goodstypeCode == 3 ? 3 : 4,
          num: this.num,
          ...this.orderInfoObject,
        };
        this.$http.post("/api/shop/order/createOrder", formData).then((res) => {
          if (res.code == 0) {
            this.$emit("success", true);
          }
        });
      }
    },
  },
  beforeDestroy() {
    //移除监听事件
    Bus.$off("sendBybus");
    Bus.$off("stepperBybus");
  },
};
</script>
<style scoped lang="less">
.pages {
  margin-top: 12px;
  .main-div {
    background: #fff;
    border-radius: 10px;
    padding: 16px 12px;
    .van-cell__title {
      color: #999;
    }
    /deep/.label-sty {
      color: #999;
    }

    .title {
      padding-left: 6px;
      font-size: 16px;
      line-height: 20px;
      height: 18px;
      margin: 10px 0;
      border-left: 4px solid #51afb1;
      font-weight: 700;
      color: #000000;
    }
    .titleFlex {
      display: flex;
      justify-content: space-between;
    }
    .van-cell__value {
      flex: 2;
      text-align: left;
    }
  }
}
</style>
